import * as React from 'react';
import { Component } from 'react';
import styles from './styles/index.less';
import { Button, Icon, message, Modal, Pagination, Popconfirm, Table } from 'antd';
import { CaseDataItem, enCloseData } from './interface';
import { ColumnProps } from 'antd/es/table';
import UploadPanel from '@/pages/routes/table/UploadPanel';

export interface CaseTableProps {
  dataSource: CaseDataItem[];
  page: number;
  pageSize: number;
  total: number;
  loading: boolean;
  onPageChange: (page: number, pageSize: number) => void;
  onEdit?: (record: CaseDataItem) => void;
}

export interface CaseTableState {
  caseTableVisible: boolean;
  addEnclosureVisible: boolean;
  data: enCloseData[];
}

class CaseTable extends Component<CaseTableProps> {
  public static propTypes = {};
  public static defaultProps = {};
  public state: CaseTableState = {
    caseTableVisible: false,
    addEnclosureVisible: false,
    data: [
      {
        name: '生产日期.jpg',
      },
      {
        name: '调度方案.png',
      },
    ],
  };

  public render() {
    const access = {
      edit: true,
      delete: true,
      attachment: true,
    };
    const columns: ColumnProps<CaseDataItem>[] = [
      {
        title: '序号',
        dataIndex: '__order',
        width: 60,
        align: 'center',
        render(_: any, __: any, index: number) {
          return <span>{index + 1}</span>;
        },
      },
      {
        title: '方案名称',
        dataIndex: 'name',
        render: (_, record) => (
          <span>
            <a>{record.name}</a>
          </span>
        ),
      },
      {
        title: '方案类型',
        dataIndex: 'type',
      },
      {
        title: '所属区域',
        dataIndex: 'area',
      },
      {
        title: '编制人',
        dataIndex: 'createUser',
      },
      {
        title: '备注',
        dataIndex: 'remark',
      },
      {
        title: '开始时间',
        dataIndex: 'startDate',
      },
      {
        title: '结束时间',
        dataIndex: 'endDate',
      },
      {
        title: '操作',
        dataIndex: '',
        render: (_, record) => (
          <span>
            {access.edit && <a onClick={() => this.props.onEdit?.(record)}>编辑 </a>}
            {access.edit && (
              <Popconfirm
                title={'确定要删除本条记录吗？'}
                onConfirm={this.confirm}
                onCancel={this.cancel}
                okText={'删除'}
                cancelText={'取消'}
              >
                <a>删除</a>
              </Popconfirm>
            )}
            <a onClick={() => this.enClosure(record)} style={{ marginLeft: 6 }}>
              附件
            </a>
          </span>
        ),
      },
    ];
    const enCloseTable: ColumnProps<CaseDataItem>[] = [
      {
        title: '序号',
        dataIndex: '',
        render(_: any, __: any, index: number) {
          return <span>{index + 1}</span>;
        },
      },
      {
        title: '附件名称',
        dataIndex: 'name',
      },
      {
        title: '操作',
        dataIndex: '',
        render(_: any, __: any, index: number) {
          return (
            <label>
              <a>下载</a> <a>删除</a>
            </label>
          );
        },
      },
    ];

    const { dataSource, loading, pageSize, page, total, onPageChange } = this.props;
    return (
      <div className={styles.page}>
        <Table dataSource={dataSource} bordered loading={loading} columns={columns} rowKey="id" pagination={false} />
        <div className={styles.pagination}>
          <Pagination pageSize={pageSize} current={page} total={total} onChange={onPageChange} />
          <Modal title="附件" visible={this.state.caseTableVisible} onCancel={this.handleCancel} footer={null}>
            <Button onClick={this.openEnclose}>
              <Icon type="to-top" style={{ marginRight: 5 }} />
              上传文件
            </Button>
            <Table
              columns={enCloseTable}
              dataSource={this.state.data}
              size="middle"
              rowKey={'name'}
              bordered
              pagination={false}
            />
          </Modal>
          <Modal
            title="添加附件"
            visible={this.state.addEnclosureVisible}
            onCancel={() => {
              this.setState({ addEnclosureVisible: false });
            }}
            footer={null}
          >
            <UploadPanel
              onSuccess={() => {
                this.setState({ addEnclosureVisible: false });
              }}
            />
          </Modal>
        </div>
      </div>
    );
  }

  private delete = (record: CaseDataItem) => {
    const id = record.id;
  };
  private enClosure = (record: CaseDataItem) => {
    this.setState({ caseTableVisible: true });
    const id = record.id;
    console.log(record.id);
  };
  private handleCancel = () => {
    this.setState({ caseTableVisible: false });
  };
  private handleSubmit = (e: any) => {
    e.preventDefault();
    // this.props.form.validateFields((err: any, value: any) => {
    //   if (err) return;
    //   console.log(value);
    // });
  };
  private openEnclose = () => {
    this.setState({ addEnclosureVisible: true });
  };
  private confirm = (e: any) => {
    console.log(e);
    message.success('删除成功');
  };

  private cancel = (e: any) => {
    console.log(e);
    message.error('取消删除');
  };
}

export default CaseTable;
